<template>
  <el-form :label-width="100"
    ><!-- 有 label-width就会对齐-->
    <!-- SPU名称 -->
    <el-form-item label="SPU名称">{{ data.spuName }}</el-form-item>
    <!-- SKU名称 -->
    <el-form-item label="SKU名称">
      <el-input placeholder="SKU名称" v-model="formData.skuName"></el-input>
    </el-form-item>
    <!-- 价格 -->
    <el-form-item label="价格">
      <el-input-number
        v-model="formData.price"
        :min="1"
        placeholder="价格"
      ></el-input-number>
    </el-form-item>
    <!-- 重量 -->
    <el-form-item label="重量">
      <el-input-number
        v-model="formData.weight"
        :min="1"
        placeholder="重量"
      ></el-input-number>
    </el-form-item>
    <!-- 规格描述 -->
    <el-form-item label="规格描述">
      <el-input
        type="textarea"
        rows="4"
        placeholder="规格描述"
        v-model="formData.skuDesc"
      ></el-input>
    </el-form-item>
    <!-- 平台属性 -->
    <el-form-item label="平台属性">
      <ul class="select_container">
        <li v-for="(attr, index) in attrs" :key="attr.id" class="select_item">
          <strong>{{ attr.attrName }}</strong>
          <el-select v-model="skuAttrValueList[index]">
            <el-option
              v-for="value in attr.attrValueList"
              :key="value.id"
              :label="value.valueName"
              :value="attr.id + ',' + value.id"
            ></el-option>
          </el-select>
        </li>
      </ul>
    </el-form-item>
    <!-- 销售属性 -->
    <el-form-item label="销售属性">
      <ul class="select_container">
        <li
          v-for="(saleAttr, index) in saleAttrs"
          :key="saleAttr.id"
          class="select_item"
        >
          <strong>{{ saleAttr.saleAttrName }}</strong>
          <el-select v-model="SpuSaleAttrList[index]">
            <el-option
              v-for="item in saleAttr.spuSaleAttrValueList"
              :key="item.id"
              :label="item.saleAttrValueName"
              :value="saleAttr.id + ',' + item.id"
            ></el-option>
          </el-select>
        </li>
      </ul>
    </el-form-item>
    <!-- 图片列表 -->
    <el-form-item>
      <el-table border stripe :data="spuImageList" ref="tableRef">
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="图片">
          <template #="{ row }">
            <img :src="row.imgUrl" width="100" />
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="imgName"></el-table-column>
        <el-table-column label="操作">
          <template #="{ row }">
            <el-button
              type="primary"
              v-if="!row.isDefault"
              @click="setDefault(row)"
              >设为默认</el-button
            >
            <el-button type="warning" v-else @click="cancelDefault(row)"
              >取消默认</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <!-- 保存取消 -->
    <el-form-item>
      <el-button type="primary" @click="saveSkuInfo">保存</el-button>
      <el-button @click="$emit('change-view', ViewNames.LIST)">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "SkuForm",
});
</script>
<script lang="ts" setup>
//类型类型
import type { ResSPU, ResSpuImage } from "@/api/spu";
import type { typeReqSaveSkuInfoParm } from "@/api/sku";
import type { attrInfo } from "@/api/attr";
import type { ResSpuSaleAttr } from "@/api/spu";
//接口引入
import useCategorySelector from "@/hooks/categorySelector";
import { reqAttrInfoList } from "@/api/attr";
import { requestSpuSaleAttrList, requestSpuImageList } from "@/api/spu";
import { reqSaveSkuInfo } from "@/api/sku";
import { ElTable, ElMessage } from "element-plus";
import { ViewNames } from "../index";

//初始化1:  接收父组件的props传值
const props = defineProps<{
  data: ResSPU;
}>();
//初始化2： 获取当前三级分类列表的categoryId
const { category1Id, category2Id, category3Id } = useCategorySelector();
//初始化3:  接收自定义事件
const emits = defineEmits(["change-view"]);

console.log("skuForm", props.data);

//数据1:  初始化用户存储收集到的sku数据
const formData = ref<typeReqSaveSkuInfoParm>({
  spuId: props.data.id,
  tmId: props.data.tmId,
  category3Id: props.data.category3Id,
  skuName: "",
  price: 0,
  weight: 0,
  skuDesc: "",
  skuDefaultImg: "",
  skuImageList: [],
  skuAttrValueList: [],
  skuSaleAttrValueList: [],
});
//数据2： 保存请求1 获取的三级分类对应的平台属性列表
const attrs = ref<attrInfo[]>([]);
//数据3:  保存未被处理的  用户通过 下拉框 选择的 平台属性
const skuAttrValueList = ref<string[]>([]);
//数据4:  保存未被处理的  用户通过 下拉框 选择的 销售属性
const SpuSaleAttrList = ref<string[]>([]);
//数据5:  保存请求2 获取的销售属性列表
const saleAttrs = ref<ResSpuSaleAttr[]>([]);
//数据6:  保存请求3 获取的当前spu下的所有图片列表
const spuImageList = ref<SkuImage[]>([]);
//数据7:  类型  所有当前SPU下的所有图片列表数据类型
type SkuImage = ResSpuImage & {
  isDefault: boolean;
};
//数据8:  保存手动设置的默认图片信息
const defaultImage = ref<SkuImage | null>(null);
//数据9:  存储el-table实例（如果我们想获取到是这个对象类类型）:typeof 如果想获取到是这个组件对象自身的一些特性: typeof + instanceType
const tableRef = ref<InstanceType<typeof ElTable> | null>(null);

//请求1:  初始化请求 获取平台属性列表
const getAttrInfoList = async () => {
  try {
    const result = await reqAttrInfoList(
      Number(category1Id.value),
      Number(category2Id.value),
      Number(category3Id.value)
    );
    attrs.value = result;
    console.log("获取平台属性列表", result);
  } catch (e) {
    ElMessage.error("获取平台属性列表失败");
  }
};
getAttrInfoList();

//请求2:  初始化请求  获取当前SPU下的的所有销售属性列表
const getSpuSaleAttrList = async () => {
  try {
    saleAttrs.value = await requestSpuSaleAttrList(props.data.id);
  } catch (e) {
    ElMessage.error("请求当前SPU下的的所有销售属性列表失败");
  }
};
getSpuSaleAttrList();

//请求3:  初始化请求  获取所有当前SPU下的所有图片列表数据
const getSpuImageList = async () => {
  try {
    const result = await requestSpuImageList(props.data.id);
    //循环给图片列表添加isDefault属性
    spuImageList.value = result.map((item) => {
      return {
        ...item,
        isDefault: false,
      };
    });
  } catch (e) {
    ElMessage.error("获取所有当前SPU下的所有图片列表数据失败");
  }
};
getSpuImageList();

//方法1:  保存按钮 点击事件
const saveSkuInfo = async () => {
  console.log("skuAttrValueList", skuAttrValueList);
  console.log("saveSkuInfo", formData.value);
  //1.处理  用户通过 下拉框 选择的 平台属性的格式
  formData.value.skuAttrValueList = skuAttrValueList.value
    .map((item) => {
      //item: "37,32"  "3245,7796"
      const [a, b] = item.split(",");
      // return {a,b} 直接返回 若有没有填写的选项 会有空白值 ,需要过滤掉空白
      return {
        attrId: Number(a),
        valueId: Number(b),
      };
    })
    .filter((item) => item); //filter过滤掉空白
  //2.处理  用户通过 下拉框 选择的 销售属性的格式
  formData.value.skuSaleAttrValueList = SpuSaleAttrList.value
    .map((item) => {
      //item: "37,32"  "3245,7796"
      const [a, b] = item.split(",");
      // return {a,b} 直接返回 若有没有填写的选项 会有空白值 ,需要过滤掉空白
      return {
        saleAttrId: Number(a),
        saleAttrValueId: Number(b),
      };
    })
    .filter((item) => item); //filter过滤掉空白

  //3.收集图片数据
  const selectionRows = tableRef.value?.getSelectionRows(); //getSelectionRows获取表格选中的行信息组成的数组
  //如果收集到了图片数据,则插入到formData中
  if (selectionRows) {
    formData.value.skuImageList = selectionRows;
  }
  //将默认图片的url保存到formData中
  if (defaultImage.value) {
    formData.value.skuDefaultImg = defaultImage.value.imgUrl;
  } else {
    formData.value.skuDefaultImg = "";
  }

  //4.发送添加sku请求
  try {
    await reqSaveSkuInfo(formData.value);
    ElMessage.success("添加sku成功");
    emits("change-view", ViewNames.LIST);
  } catch (e) {
    ElMessage.error("添加sku失败");
  }
  console.log("收集图片数据", selectionRows);
  console.log("formData", formData.value);
};
//方法2:  图片设置默认 点击事件
const setDefault = (row: SkuImage) => {
  //若已经存在默认图片  则把先前的默认图片isDefault改为false
  if (defaultImage.value) {
    defaultImage.value.isDefault = false;
  }
  //将点击的这一行 的isDefault设为true
  row.isDefault = true;
  //用变量保存这一行的信息
  defaultImage.value = row;
};
//方法3:  图片取消默认 点击事件
const cancelDefault = (row: SkuImage) => {
  row.isDefault = false;
  //清空上一次保存的默认图片的信息
  defaultImage.value = null;
};
</script>

<style lang="less" scoped>
.select_container {
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
.select_container .select_item {
  display: flex;
  margin: 10px 0;
  width: 40%;
}

.select_container .select_item strong {
  width: 100px;
  text-align: right;
  margin-right: 10px;
}
.select_container .select_item strong::after {
  content: ":";
}
</style>
